<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="cs.css">
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="vue-app">
        <h1 >动态 CSS Class</h1>

        <h2 >实例1</h2>
           <div v-on:click="changeColor = !changeColor"
                 v-bind:class="{changeColor:changeColor}">
                        <span>Henry</span>
            </div>

        <h2>实例2</h2>
        <button v-on:click="changeColor = !changeColor">change color</button>
        <button v-on:click="changeLength = !changeLength">change length</button>
        <div v-bind:class="compClasses">
                <span>Henry</span>
            </div>

    </div>

<script src="cs.js"></script>
</body>
</html>